import styles from './DataOverview.module.scss';
import { numFormat } from '@/utils/utils';
import { ElScrollbar, ElTooltip, ElImage } from 'element-plus';
import { defineComponent } from 'vue';

export default defineComponent({
    name: 'DataOverview',
    props: {
        title: {
            type: String
        },
        list: {
            type: Array,
            default: () => []
        }
    },
    setup(props, { emit, slots }) {
        return () => {
            const { list, title } = props;
            return (
                <div class={styles.DataOverview}>
                    <div class={styles.title}>{title}</div>
                    <ElScrollbar class={styles.scrollbar_box}>
                        <div class={styles.scrollbar}>
                            {list.map(item => (
                                <div class={styles.item}>
                                    <div class={styles.item_title}>
                                        {item.name}
                                        <ElTooltip
                                            effect="dark"
                                            placement="top"
                                            popper-class={styles.tool_tip}
                                            content={item.tips}>
                                            <ElImage
                                                v-show={item.tips}
                                                src="/static/question.png"
                                                class={styles.tips_img}></ElImage>
                                        </ElTooltip>
                                    </div>
                                    <div class={styles.item_value}>{numFormat(item.value)}</div>
                                </div>
                            ))}
                        </div>
                    </ElScrollbar>
                </div>
            );
        };
    }
});
